import React from 'react'
import { useLocation } from 'react-router-dom'
import './index.scss'
import { NavBar } from 'react-vant';
import { useNavigate } from 'react-router-dom';
import { CartO, ChatO, Star } from '@react-vant/icons'
import { ActionBar } from 'react-vant'
const Index: React.FC = () => {
    const navigate = useNavigate();
    const data = useLocation().state.item
    console.log(data)
    const wenlaoshi = [
        {
            name: "好后生",
            qing: "老师好，我是后生，请多指教，还不够玉玉高压村官差异不太餐厅传统提出易语言天润城"
        },
        {
            name: "拥抱吧验证",
            qing: "老师好，我是后生，请多指教，还不够玉玉高压村官差异不太餐厅传统提出易语言天润城陈思诚您邳㶨"
        },
        {
            name: "小雷",
            qing: "能不不不北屿玉玉份额一分耕耘v共同发财停车库姐夫不预报沉迷北屿验库存"
        },
    ]
    return (
        <div>
            <NavBar
                title="详情"
                leftText="返回"
                rightText="更多"
                onClickLeft={() => navigate(-1)}
            />
            <div className='tujing'>
                <div className='zuozz'><img src={data.image} alt="" /></div>
                <div className='youzz'>
                    <p>{data.name}</p>
                    <p>{data.type}</p>
                    <p>{data.address}--{data.keshi}</p>
                </div>
            </div>
            <div className='jieshao'>
                <div>
                    <img src="src/img/my-001.png" alt="" />
                    <p>在线问诊</p>
                </div>
                <div>
                    <img src="src/img/my-002.png" alt="" />
                    <p>预约挂号</p>
                </div>
                <div>
                    <img src="src/img/my-003.png" alt="" />
                    <p>私人医生</p>
                </div>
            </div>
            <div className='yuihjk'>
                <div className='yuihjk_one'>
                    <a>病友推荐度：<b>{data.pingf_formatted}</b></a>
                    <a>同行推荐度：<b>{data.tongh}</b></a>
                </div>
                <div className='yuihjk_two'>
                    <a>给予：</a><b>您好，祝您早日康复</b>
                    <p className='zizizi'>综合评分：</p><p>{data.shanc}</p>
                    <a>地址：</a><p>{data.hospital}</p>
                </div>
            </div>
            <div className='erer'>
                <div className='erer_one'>
                    <h2>在线问诊</h2>
                    {
                        wenlaoshi.map((item: any, index: any) => {
                            return <b key={index}>{item.name}---{item.qing}</b>
                        })
                    }
                </div>
            </div>
            <div className='ububub'>
                <div className='demo-action-bar'>
                    <ActionBar>
                        <ActionBar.Icon icon={<ChatO color='red' />} text='送暖心' />
                        <ActionBar.Icon icon={<CartO color='red' />} text='写评价' />
                        <ActionBar.Icon icon={<Star color='red' />} text='备选医生' />
                        <ActionBar.Button type='warning' text='加入备选' color='#00f' />
                        <ActionBar.Button type='danger' text='申请服务' color='orange' />
                    </ActionBar>
                </div>
            </div>
        </div>
    )
}

export default Index
